<template>
    <section style="height: 100%;background: #fff;">
     <header></header>

      <div class="pay_top">
      <div  class="part_pay">
      <div class="pay_list" @click="chooseBtn()" :class="{pay_choose:payStyle}">
        <div v-if="payShow">
          <div class="pay_show"></div>
          <span class="pay_show_rig">√</span>
        </div>
        <div class="part_pay_count">
        <div  class="pay_color" :class="{color_choose:payStyle}">
          <span style="font-size: .48rem">￥</span>
          <span style="font-size: .50rem">98</span>
        </div>
        <div class="slant_line"></div>
        <span  class="old_price">98</span>
        </div>
        <div class="discount">

        </div>
      </div>

      <div class="pay_list" style="margin-left: 1rem;" @click="chooseBtn2()" :class="{pay_choose:payStyle2}">
        <div v-if="payShow2">
        <div class="pay_show"></div>
        <span class="pay_show_rig">√</span>
        </div>
        <div class="part_pay_count">
          <div class="pay_color" :class="{color_choose:payStyle2}">
            <span style="font-size: .48rem">￥</span>
            <span style="font-size: .50rem">178</span>
          </div>
          <div class="slant_line"></div>
          <span class="old_price">198</span>
        </div>
        <div  class="discount">
          <span>限时<span style="font-weight: bold;font-size: .38rem;">9</span>折</span>
        </div>
      </div>
      </div>


      <div class="part_pay">
        <div class="pay_list" @click="chooseBtn3()" :class="{pay_choose:payStyle3}">
          <div v-if="payShow3">
            <div class="pay_show"></div>
            <span class="pay_show_rig">√</span>
          </div>
          <div style="height: 1.6rem;border-bottom: 1px solid #F2F2F2;">
            <div  class="pay_color" :class="{color_choose:payStyle3}">
              <span style="font-size: .48rem">￥</span>
              <span style="font-size: .50rem">238</span>
            </div>
            <div  class="slant_line"></div>
            <span class="old_price">298</span>
          </div>
          <div class="discount">
            <span>限时<span style="font-weight: bold;font-size: .38rem;">8</span>折</span>
          </div>
        </div>

        <div class="pay_list" style="margin-left: 1rem;" @click="chooseBtn4()" :class="{pay_choose:payStyle4}" >
          <div v-if="payShow4">
            <div class="pay_show"></div>
            <span class="pay_show_rig">√</span>
          </div>
          <div style="height: 1.6rem;border-bottom: 1px solid #F2F2F2;">
            <div  class="pay_color" :class="{color_choose:payStyle4}">
              <span style="font-size: .48rem">￥</span>
              <span style="font-size: .50rem">278</span>
            </div>
            <div class="slant_line"></div>
            <span class="old_price">398</span>
          </div>
          <div class="discount">
            <span>限时<span style="font-weight: bold;font-size: 18px;">7</span>折</span>
          </div>
        </div>
      </div>

      </div>

      <div class="pay_tex">
        <div style="display: flex;align-items: center;">
        <img src="../../assets/api/wx.png" class="pay_img">
        <span style="margin-left: .15rem;">微信支付</span>
        </div>
        <div style="font-size: .24rem;margin-left: .65rem;">
          <span style="color: #808080">其他支付方式请</span><span style="color: #21a8ee" @click="contactBtn()">联系客服</span>
        </div>
      </div>

      <div class="agree_ment">
        <img src="../../assets/api/chos.png" class="agree_img"  @click="chosTex()" v-if="showTex">
        <img src="../../assets/api/chos_no.png" class="agree_img" @click="chosTex()" v-else>
        <span>同意</span><span style="color: #21a8ee;" @click="agreeBtn()">《火炬网钱包协议》</span>
      </div>

      <div  class="footer_pos">
        <div class="foot_left">
          <span>到账金额：</span><span style="color: red;font-weight: bold; ">￥{{count}}</span>
        </div>
        <div class="foot_right" @click="payBtn()">
          <span>确认支付</span>
          <span style="font-size: .24rem">（实际支付：￥{{nowPay}}）</span>
        </div>
      </div>
    </section>
</template>

<script>
  import wx from 'weixin-js-sdk';
    export default {
        name: "recharge",
        data(){
          return{
            showTex:true,
            payStyle:false,
            payStyle2:true,
            payStyle3:false,
            payStyle4:false,
            payShow:false,
            payShow2:true,
            payShow3:false,
            payShow4:false,
            count:'198',
            nowPay:'178'
          }
        },
      methods:{
        contactBtn(){
          _MEIQIA('showPanel');
        },
        agreeBtn(){
          this.$router.push('/agreement_two');
        },
        chosTex(){
          if(this.showTex == true){
            this.showTex = false;
          }else{
            this.showTex = true;
          }
        },
        chooseBtn(){
          this.count = '98';
          this.nowPay = '98';
          this.payStyle = true;
          this.payShow = true;
          this.payStyle2 = false;
          this.payShow2 = false;
          this.payStyle3 = false;
          this.payShow3 = false;
          this.payStyle4 = false;
          this.payShow4 = false;
        },
        chooseBtn2(){
          this.count = '198';
          this.nowPay = '178';
          this.payStyle = false;
          this.payShow = false;
          this.payStyle2 = true;
          this.payShow2 = true;
          this.payStyle3 = false;
          this.payShow3 = false;
          this.payStyle4 = false;
          this.payShow4 = false;
        },
        chooseBtn3(){
          this.count = '298';
          this.nowPay = '238';
          this.payStyle = false;
          this.payShow = false;
          this.payStyle2 = false;
          this.payShow2 = false;
          this.payStyle3 = true;
          this.payShow3 = true;
          this.payStyle4 = false;
          this.payShow4 = false;
        },
         chooseBtn4(){
           this.count = '398';
           this.nowPay = '278';
           this.payStyle = false;
           this.payShow = false;
           this.payStyle2 = false;
           this.payShow2 = false;
           this.payStyle3 = false;
           this.payShow3 = false;
           this.payStyle4 = true;
           this.payShow4 = true;
         },
        payBtn(){
          let that = this;
          let priceid;
          if(this.showTex){

            this.$ajax.post(window.g.apiUrl+'/alipay/getProduct.do',JSON.stringify({
              type:"C",
            })).then((response)=>{
              if(that.nowPay == 98){
                priceid = response.data.data[4].id;
              }else if(that.nowPay == 178){
                priceid = response.data.data[5].id;
              }else if(that.nowPay == 238){
                priceid = response.data.data[6].id;
              }else if(that.nowPay == 278){
                priceid = response.data.data[7].id;
              }
              this.$ajax.post(window.g.apiUrl+'/wpay/jsPay.do',JSON.stringify({
                type:"C",
                pid:priceid,
                count:1
              })).then((response)=>{
                if(response.data.code == 200){
                  let appId = response.data.data.appId;
                  let nonceStr = response.data.data.nonceStr;
                  let timeStamp = response.data.data.timeStamp;
                  let package_id = response.data.data.package;
                  let signType = response.data.data.signType;
                  let paySign = response.data.data.paySign;
                  let signature = response.data.data.signature;

                  wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: appId, // 必填，公众号的唯一标识
                    timestamp: timeStamp, // 必填，生成签名的时间戳
                    nonceStr: nonceStr, // 必填，生成签名的随机串
                    signature:signature,// 必填，签名，见附录1
                    jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2，如果只是支付，只用这一个参数就够了
                  });
                  wx.ready(function(){
                    wx.chooseWXPay({
                      timestamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                      nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
                      package: package_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                      signType:  signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                      paySign: paySign, // 支付签名
                      success: function (res) {
                        sessionStorage.setItem('payCount',that.count);
                        that.$router.push('/pay_success');
                      },
                      //如果你按照正常的jQuery逻辑，下面如果发送错误，一定是error，那你就太天真了，当然，jssdk文档中也有提到
                      fail: function(res) {
                        //接口调用失败时执行的回调函数。
                        that.$dialog.notify({
                          mes: '支付失败',
                          timeout: 1500,
                        });
                      },
                      complete: function(res) {
                        //接口调用完成时执行的回调函数，无论成功或失败都会执行。

                      },
                      cancel: function(res) {
                        //用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
                        that.$dialog.notify({
                          mes: '支付取消',
                          timeout: 1500,
                        });
                      },
                      trigger: function(res) {
                        //监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

                      }
                    });
                  });

                }else if(response.data.code == 506){
                  that.$dialog.notify({
                    mes: '未绑定公众号，请绑定后重试',
                    timeout: 1500,
                  });
                }else{
                  that.$dialog.notify({
                    mes: '支付失败，请稍后重试',
                    timeout: 1500,
                  });
                }


              }).catch(()=>{
              })

            }).catch(()=>{
            })




          }

        }
      },
      watch:{
        showTex:function(val,oldVal){
          if(val == false){
            document.getElementsByClassName('foot_right')[0].style.backgroundColor = '#e3e3e3';
          }else{
            document.getElementsByClassName('foot_right')[0].style.backgroundColor = '#E72A26';
          }
        },

      },
      created(){
        (function(m, ei, q, i, a, j, s) {
          m[i] = m[i] || function() {
            (m[i].a = m[i].a || []).push(arguments)
          };
          j = ei.createElement(q),
            s = ei.getElementsByTagName(q)[0];
          j.async = true;
          j.charset = 'UTF-8';
          j.src = 'https://static.meiqia.com/dist/meiqia.js?_=t';
          s.parentNode.insertBefore(j, s);
        })(window, document, 'script', '_MEIQIA');
        _MEIQIA('entId', 90685);
        _MEIQIA('withoutBtn');

        const that = this;
        this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
          .then((response)=>{
            if(response.data.code != 200){
              this.$dialog.notify({
                mes: '登录失效，正在跳转至登录页面',
                timeout: 1500,
                callback:()=>{
                  that.$router.push('/login');
                }
              });
            }
          }).catch(()=>{
        })

      },
    }

</script>

<style scoped>
  header{
    width: 100%;
    height: 1.9rem;
    background-image: url("../../assets/mine/mobile_head.png");
    background-size: 100% 100%;
  }
  .pay_show{
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-top: .6rem solid #FBB86F;
    border-left:.6rem solid transparent;
    right: 0;
    top: 0;
  }
  .pay_show_rig{
    position: absolute;
    right: .04rem;
    top: .04rem;
    color: #fff;
    font-size: .3rem;
  }
  .pay_top{
    width: 100%;
    height:5.8rem;
    border-bottom: 1px solid #F2F2F2;
  }
  .pay_img{
    width: .5rem;
    height: .5rem;
    position: relative;
    top: 1px;
  }
  .footer_pos{
    width: 100%;
    height: 1rem;
    background: #F5F5F5;
    position: fixed;
    bottom: 0;
    display: flex;
  }
  .foot_left{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
  }
  .foot_right{
    width: 2.5rem;
    height: 1rem;
    background: #E72A26;
    color: #fff;
    flex: none;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
  }
  .pay_list{
    width: 2rem;
    height: 2.3rem;
    border: 1px solid  rgba(194,194,194,.5);
    margin-top: .4rem;
    padding: .1rem;
    position: relative;;
  }
  .part_pay{
    display: flex;
    justify-content: center;
  }
  .part_pay_count{
    height: 1.6rem;
    border-bottom: 1px solid #F2F2F2;
  }
  .discount{
    text-align: center;
    margin-top: .05rem;
    color: #F45D5F;
  }
  .slant_line{
    background: #FBB86F;
    width: 1px;
    height: 1.1rem;
    transform: rotate(45deg);
    position: absolute;
    right: .66rem;
    top: .48rem;
  }
  .old_price{
    text-decoration: line-through;
    font-size: .34rem;
    display: inline-block;
    width: 0.8rem;
    text-align: center;
    position: absolute;
    right: .0rem;
    bottom: .7rem;
  }
  .pay_choose{
    border: 2px solid #FBB86F;
    box-shadow: 0 0 3px #FBB86F;
  }
  .pay_tex{
    padding-left: .2rem;
    height: 1.2rem;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: flex-start;
    flex-flow: column;
    justify-content: center;
  }
  .agree_ment{
    font-size: 0.24rem;
    display: flex;
    align-items: center;
    margin-top: 0.3rem;
    justify-content: flex-end;
    padding-right: .2rem
  }
  .agree_img{
    width: 0.32rem;
    height: 0.32rem;
  }
  .pay_color{
    position: absolute;
    left: .1rem;
    top: .3rem;
  }
  .color_choose{
    color: #fbb86f;
  }

</style>
